<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="home/public/head::head(~{::title},~{::style},~{})">
    <title>我的文档-答题吧</title>
    <style>
        .layui-form{
            margin-top: 20px;
        }
        .head-img-box {
            height: 190px;
        }

        .head-img {
            height: 100%;
            width: 90%;
        }

        .text-box {
            width: 100%;
            height: 165px;
        }

        .text-overflow {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            font-size: 15px;
            line-height: 26px;
        }

        .text-summary {
            font-size: 15px;
            line-height: 26px;
        }
        .layui-card-body {
            height: 230px;
            padding: 20px 20px;
        }

        .layui-badge {
            margin-right: 5px;
        }

        .layui-card {
            margin-bottom: 20px;
        }
        h4 {
            font-weight: bolder;
        }

        .shadow {
            -webkit-box-shadow: #666 3px 3px 10px;
            -moz-box-shadow: #666 3px 3px 10px;
            box-shadow: #666 3px 3px 10px;
        }

        .download-card-box {
            padding: 20px 20px;
            padding-bottom: 40px;
            height: auto;
        }

        .layui-rate {
            padding: 0;
        }

    </style>
</head>

<body>

<!--顶部导航栏导入-->
<div th:replace="home/public/top-menu::top-menu"></div>


<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">我的上传</li>
                    <li onclick="getCommentList()">积分明细</li>
                    <li onclick="getDownloadList()">我的下载</li>
                </ul>
                <div class="layui-tab-content">
                    <!--我的上传开始-->
                    <div id="myUpload" v-cloak class="layui-tab-item layui-show">
                        <!--问题搜索栏开始-->
                        <form class="layui-form layui-form-item" id="form">
                            <input type="hidden" name="userId" th:value="${session.user.id}">
                            <div class="layui-input-inline">
                                <select name="gradeId" lay-filter="gradeId">
                                    <option value="">所有年级</option>
                                    <option th:value="${item.id}" th:each="item : ${gradeList}"
                                            th:text="${item.gradeName}"></option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="subjectId" id="subjectId">
                                    <option value="">所有学科</option>
                                    <option th:value="${item.id}" th:if="${itemState.count<=3}"
                                            th:each="item,itemState : ${subjectList}"
                                            th:text="${item.subjectName}"></option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="documentType">
                                    <option value="">所有资料类型</option>
                                    <option value="1">题目资料</option>
                                    <option value="2">复习资料</option>
                                    <option value="3">杂项资料</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="integral">
                                    <option value="">所有积分类型</option>
                                    <option value="0">免费资料</option>
                                    <option value="1">需要积分</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <button class="layui-btn layui-btn-warm" lay-submit lay-filter="formSubmit">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                            </div>
                        </form>
                        <hr class="layui-bg-green">
                        <!--问题搜索栏结束-->
                        <div class="layui-card shadow layui-anim layui-anim-scale" v-for="item in documentList">
                            <div class="layui-card-body">
                                <div class="layui-col-md4">
                                    <div class="head-img-box">
                                        <img class="head-img" :src="item.user.userPhoto" alt="...">
                                    </div>
                                </div>
                                <div class="layui-col-md8">
                                    <div class="row text-box">
                                        <h4>{{item.title}}</h4>
                                        <p class="text-overflow">{{item.summary}}</p>
                                    </div>
                                    <div class="row">
                                        <div class="layui-col-md5">
                                            <span class="layui-badge layui-bg-orange">{{item.grade.gradeName}}</span>
                                            <span class="layui-badge layui-bg-blue">{{item.subject.subjectName}}</span>
                                            <span class="layui-badge layui-bg-green">{{item.documentType==1?'题目资料':item.documentType==2?'复习资料':'杂项资料'}}</span>
                                            <span class="layui-badge">{{item.integral>0?item.integral+'积分':'免积分'}}</span>
                                            <span class="layui-badge layui-bg-cyan">{{item.downloadCount+'次下载'}}</span>
                                        </div>
                                        <div class="layui-col-md3">
                                            上传用户：<a
                                                :href="'/home/index/userinfo/'+item.user.id">{{item.user.nickName}}</a>
                                        </div>
                                        <div class="layui-col-md2">
                                            {{item.createTime | formatDate('yyyy-MM-dd')}}
                                        </div>

                                        <div class="layui-col-md2">
                                            <a class="layui-btn layui-btn-sm layui-btn-warm"
                                               :href="'/home/document/detial/'+item.id">
                                                查看详情<i class="layui-icon">&#xe65f;</i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--分页按钮-->
                        <div class="layui-row text-center">
                            <div id="laypage"></div>
                        </div>
                    </div>
                    <!--我的上传结束-->

                    <!--积分明细开始-->
                    <div class="layui-tab-item">
                        <div class="layui-form">
                            <table class="layui-table" id="table">
                                <colgroup>
                                    <col>
                                    <col>
                                    <col>
                                    <col>
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>积分</th>
                                    <th>时间</th>
                                    <th>资料名称</th>
                                    <th>下载用户</th>
                                    <th>类型</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in commentList">
                                    <td>{{index+1}}</td>
                                    <td>{{item.userId==userId?'-':'+'}}{{item.document.integral}}</td>
                                    <td>{{item.createTime}}</td>
                                    <td><a target="_blank" :href="'/home/document/detial/'+item.document.id">{{item.document.title}}</a>
                                    </td>
                                    <td><a target="_blank" :href="'/home/index/userinfo/'+item.userId">{{item.user.nickName}}</a>
                                    </td>
                                    <td>
                                        <span v-if="item.userId!=userId" class="layui-badge layui-bg-green">资源被下载</span>
                                        <span v-if="item.userId==userId" class="layui-badge">下载资源</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--积分明细结束-->

                    <!--下载明细开始-->
                    <div class="layui-tab-item" id="myDowload">
                        <div class="layui-card layui-anim layui-anim-scale" v-for="item in downloadList">
                            <div class="layui-card-body download-card-box">
                                <h4><a :href="'/home/document/detial/'+item.document.id" target="_blank">
                                    {{item.document.title}}
                                </a></h4>
                                <p class="text-summary">{{item.document.summary}}</p>
                                <div class="layui-col-md3">
                                    <span class="layui-badge layui-bg-green">
                                        {{item.document.documentType==1?'题目资料':item.document.documentType==2?'复习资料':'杂项资料'}}
                                    </span>
                                    <span class="layui-badge">{{item.document.integral>0?item.document.integral+'积分':'免积分'}}</span>
                                    <span class="layui-badge layui-bg-cyan">{{item.document.downloadCount}}次下载</span>
                                </div>
                                <div class="layui-col-md3">上传时间:{{item.document.createTime}}</div>
                                <div class="layui-col-md3">
                                    上传用户：<a :href="'/home/index/userinfo/'+item.user.id">{{item.user.nickName}}</a>
                                </div>
                                <div class="layui-col-md2" id="score"></div>
                                <div class="layui-col-md1" v-if="item.score==null||item.commentContent==null">
                                    <button th:if="${session.user.commentState}" class="layui-btn layui-btn-sm"
                                            @click="openComment(item.id)">立即评价
                                    </button>
                                    <button class="layui-btn-disabled layui-btn-sm"
                                            th:if="!${session.user.commentState}"
                                            onclick="msg('您当前已被禁止评论，如有疑问请联系管理员！')">立即评价
                                    </button>
                                </div>
                            </div>
                            <div class="layui-card layui-anim layui-anim-scale"
                                 v-if="item.score!=null&&item.commentContent!=null">
                                <div class="layui-card-body download-card-box">
                                    <p class="text-overflow">
                                        <span style="font-weight: bolder">我的评价：</span>
                                        {{item.commentContent}}
                                    </p>
                                    <div class="layui-col-md4 layui-col-md-offset6 text-right">{{item.createTime}}</div>
                                    <div class="layui-col-md2 text-right" :id="'my-score-'+item.id" v-if="item.score!=null"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--下载明细结束-->

                </div>
            </div>
        </div>
    </div>

</div>

<!-- 底部导航栏 start-->
<footer th:replace="home/public/footer::footer"></footer>
<!-- 底部导航栏end -->

<script th:src="@{/static/common/plugs/vue/vue.js}"></script>
<script th:inline="javascript">

    var subjectList = [[${subjectList}]];
    var formData={userId:[[${session.user.id}]]};
    var rate;
    function initLayui() {
        layui.use(['form', 'laypage', 'rate', 'layer'], function () {
            var form = layui.form
                , laypage = layui.laypage
                , layer = layui.layer;
            rate = layui.rate;

            //执行一个laypage实例
            laypage.render({
                elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: totalCount //数据总数，从服务端得到
                , limit: pageSize //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                , limits: [5, 10, 20, 40, 50, 100] //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    pageSize = obj.limit;
                    pageIndex = obj.curr;
                    //首次不执行
                    if (!first) {
                        pagination(obj.curr, obj.limit);
                    }
                }
            });

            //监听select
            form.on('select(gradeId)', function (data) {
                console.log(data.value);
                $("#subjectId").html("");
                $("#subjectId").append($("<option>").val("").text("请选择学科"));
                for (var i = 0; i < subjectList.length; i++) {
                    if (data.value <= 1 && i > 2)
                        break;
                    var option = $("<option>").val(subjectList[i].id).text(subjectList[i].subjectName);
                    //通过LayUI.jQuery添加列表项
                    $("#subjectId").append(option);
                    form.render('select');
                }
            });

            //监听提交
            form.on('submit(formSubmit)', function (data) {
                console.log(data.field);
                formData = data.field;
                //搜索按钮请求，需要刷新layui，防止分页不刷新
                app.$data.initLayui = false;
                pagination(pageIndex, pageSize);
                return false;
            });
        });
    }

    var that = this;
    var app = new Vue({
        el: "#myUpload",
        data: {
            documentList: null,//教师列表
            initLayui: false//是否可以渲染layui，请求到数据后才可以
        },
        watch: {//监听data中的数据变化
            'initLayui': function (newVal) {
                if (newVal)
                    that.initLayui();
            }
        },
        filters: {
            formatDate: function (date, fmt) {
                return new Date(date).Format(fmt);
            }
        }
    });

    //日期格式化
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    var pageIndex = 1;
    var pageSize = 5;
    var totalCount = 10;
    /*异步请求用户数据*/
    function pagination(pageIndex, pageSize) {
        console.log(formData);
        formData['pageNum'] = pageIndex;
        formData['pageSize'] = pageSize;
        var requestPath = "/home/document/searchListToLimit";
        //提交表单，登录验证
        $.ajax({
            url: requestPath,
            type: "post",
            data: formData,
            success: function (res) {
                if (res.success) {
                    totalCount = res.data.pageInfo.total;
                    console.log("总数：", totalCount);
                    console.log(res);
                    app.$data.documentList = res.data.documentList;
                    //需要重新渲染Layui，防止数据不刷新
                    app.$data.initLayui = true;
                    return true;
                }
            },
            error: function (res) {
                console.log("出错啦");
            }
        });
    }

    /**
     * 获取积分明细列表
     */
    function getCommentList() {
        $.get("/home/document/myUploadAndDownload/" + tableApp.$data.userId, function (res) {
            tableApp.$data.commentList = res.data;
        });
    }

    function msg(content) {
        layer.msg(content);
    }

    /**
     * 评分图片渲染
     * @param list
     */
    function initRate(list) {
        /*用户评分图标渲染*/
        for (var i = 0; i < myDowloadApp.$data.downloadList.length; i++) {
            var id = "#my-score-" + myDowloadApp.$data.downloadList[i].id;
            rate.render({
                elem: id
                , value: myDowloadApp.$data.downloadList[i].score
                , half: true
                , text: false
                , readonly: true
                , theme: '#FE0000' //自定义主题色
            });
        }
    }

    /**
     * 获取下载记录列表
     */
    function getDownloadList() {
        $.get("/home/document/myDownloadList/" + myDowloadApp.$data.userId, function (res) {
            myDowloadApp.$data.downloadList = res.data;
            setTimeout(initRate, 100);
        });
    }

    /**
     * 积分明细数据
     */
    var tableApp = new Vue({
        el: "#table",
        data: {
            commentList: null,
            userId: [[${session.user.id}]]
        }
    });

    /**
     * 我的下载记录数据
     */
    var myDowloadApp = new Vue({
        el: "#myDowload",
        data: {
            userId: [[${session.user.id}]],
            downloadList: null//我的下载记录
        },
        methods:{
            /**
             * 打开评分界面
             * @param commentId
             */
            openComment: function (commentId) {
                console.log("打开评论界面");
                layer.open({
                    type: 2,
                    title: "评论",
                    area: ['40%', '35%'],
                    anim: 1,
                    content: "/home/document/comment/" + commentId
                });
            }
        }
    });

    /*获取用户列表*/
    pagination(pageIndex, pageSize);

</script>
</body>
</html>
